<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>API测试工具</title>
    <script type="text/javascript">
        var jsonEditor;
    </script>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/template-native.js"></script>
    <script type="text/javascript" src="js/api-define.js"></script>
    <script type="text/javascript" src="js/api-tools.js"></script>
     <link rel="stylesheet" type="text/css" href="js/jsoneditor.css">
  <script type="text/javascript" src="js/jsoneditor.js"></script>

  <!-- ace editor -->
  <script type="text/javascript" src="js/asset/ace/ace.js"></script>

  <!-- json lint -->
  <script type="text/javascript" src="js/asset/jsonlint/jsonlint.js"></script>
    <script id="ruleRow" type="text/html">
        <tr>
            <td class="ruleName"><span><%=name%></span>：</td>
            <td class="ruleDesc"><span><%=desc%></span>：</td>
     </script>
    <script id="fieldRow" type="text/html">
        <tr>
            <td class="fieldName"><span><%=name%>(<%=key%>)</span>：</td>
            <td><span class="l">
            <%if(inList){%>
                <%
                var names;
                if(typeof descList == 'undefined')
                    names = inList;
                else
                    names = descList;
                %>
                <select  name="<%=key%>" value="<%=value%>" style="width:180px;">
                <%for(var i=0;i<inList.length;i++){%>
                    <option value="<%=inList[i]%>"><%=names[i]%>(<%=inList[i]%>)</option>
                <%}%>
                </select>
                <span class="l explain"><%=remark%></span>
            <%}else if(key == "__body"){%>
            
			<textarea type="text" name="<%=key%>"  style="width:480px;height: 100px"><%=value%></textarea></span>
                       <span class="point-blue">
                           <%if(required){%>
                                <span class="required">*</span>
                           <%}%>
                       </span><span class="l explain"><%=remark%></span>
             <%} else{%>

                <input type="text" name="<%=key%>" value="<%=value%>" style="width:180px;"></span>
                       <span class="point-blue">
                           <%if(required){%>
                                <span class="required">*</span>
                           <%}%>
                       </span><span class="l explain"><%=remark%></span>
                <%}%>
            </td>
        </tr>
    </script>
    <script type="text/javascript">
        $(function () {
            initApiCategory();
            $("#tree").delegate(".leaf",'click',function(){
                var api = $(this).attr("api");
                var category = $(this).attr("category");
                apiClick(category,api);
            });

            $("#tree").delegate("a",'click',function(){
                var next = $(this).next();
                if(next.is(":hidden")){
                    next.show("normal");
                 }else{
                    next.hide("normal");
                }
            });

            $("#environment").change(function(){
                $("#serverUrl").val($(this).children('option:selected').val());
            })

            $("#serverUrl").val($("#environment").children(':first').val());

            $("#businessForm").on("keyup",":input",function(){
                onchange();
            })

            $("#businessForm").on("change","select",function(){
                onchange();
            });
        })
    </script>

    <style type="text/css">
        html {
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            height: 100%;
        }

        .main,.sitebar {
            height: 100%;
        }
        .main {
            width: 100%;
            height: 100%;
            float: left;
        }
        .main .content {
            margin-left: 200px;
        }
        .sitebar {
            width: 200px;
            float: left;
            text-align: center;
            margin-left: -100%;
        }

        .maincontent {
            border-left: 4px solid #336699;
            padding-left: 10px;
        }

        .top-header {
            padding: 10px;
            background-color: #1f4e7c;
            color: white;
            text-align: center;
            font-size: 1.2em;
            font-weight: bold;
        }

        .title {
            text-align: center;
            font-size: 1.1em;
            background-color: #bbd988;
            padding: 2px;
            color: #ffffff
        }

        fieldset {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #336699;
            border-bottom-width: 5px;
        }

        td.fieldName {
            text-align: right;
            
        }
       

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            }

        li {
            display: block;

        }

       .nav-list > li {
            border-bottom-color: #e5e5e5;
            cursor: pointer;

        }
        .nav-list > li {
            display: block;
            padding: 0;
            margin: 0;
            border: 0;
            border-top: 1px solid #fcfcfc;
            border-bottom: 1px solid #e5e5e5;
            position: relative;
            text-align: center;
        }

        .node  a{
            color: #2b7dbc;
            font-weight: bold;
            font-size: 13px;
            display: block;
            height: 38px;
            line-height: 38px;
            text-align: center;
            background-color: #f9f9f9;
            text-shadow: none!important;
            text-decoration: none;
            background: #f9f9f9 url(./images/add.png) no-repeat 60px center;
        }
        .node ul {
            display: none;
        }



        .node li {
            border-top: 1px dotted #9dbdd6;
            color: #616161;
            padding: 7px 0 9px 20px;
            margin: 0;
            text-align: left;

        }

        #response div  {
            margin-top: 5px;;
            float: left;padding-left: 5px;margin-left: 5px;;
            min-width: 150px;
        }

        .field-name {
            padding: 2px;
            background-color: #336699;
            color: white;
            font-weight: bold;
            border: 1px solid #225588;
            font-size: 15px;
            margin-right: 5px;
            margin-left: 10px;
        }

        .row-title {
            margin-left: 20px;
            z-index: 2;
            background-color: #ffffff;
            padding: 5px;
            font-weight: bold;
        }

        .row-line{
            margin-top: -8px;z-index: 1;height: 1px;background-color: #336699;width: 90%;margin-bottom: 10px
        }

        td.ruleName{
            text-align: right;
            padding-right: 5px;
            background-color: #336699;
            border-bottom: 1px solid #ffffff;
            color: #ffffff;
        }

    </style>
</head>
<body>

<div class="top-header">
    API测试工具
</div>
<div class="main">
    <div class="content">

        <div class="maincontent">

            <table style="border-collapse:collapse; border-spacing:0;width:1000px;">
                <tbody>

                <tr>
                    <td valign="top">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tbody>

                            <tr>
                                <td style="">
                                    <form id="businessForm">
                                        <fieldset style="margin-top: 20px">
                                            <legend><span id="apiName"></span>业务参数</legend>

                                            <table  width="100%"  id="businessParams" border="0" cellpadding="4" cellspacing="0">
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </fieldset>
                                    </form>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table width="500" border="0" cellpadding="4" cellspacing="0">
                                        <tbody>
                                        <tr>
                                            <td colspan="2">
                                                method：<input type="radio" name="requestMethod" value="GET">GET
                                                <input type="radio" name="requestMethod" value="POST">POST
                                                <input type="radio" name="requestMethod" value="PUT">PUT
                                                <input type="radio" name="requestMethod" value="DELETE">DELETE
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="160">&nbsp;</td>
                                            <td width="340" align="center">
                                                <input type="button" value="提交" onclick="submit();this.blur();"
                                                       style="width:60px;height:24px;*padding-top:3px;border:#666666 1px solid;cursor:pointer">
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>

                </tr>
                <tr></tr>
                </tbody>
            </table>

            <div style="margin-bottom: 10px">
               <span class="row-title">响应字段说明</span>
                <div class="row-line"></div>
                <div id="response" style="width: 90%;min-height: 30px">

                </div>
                <div style="clear: both"></div>
            </div>
            <div id="result" style="width: 90%;">
                <span class="row-title">提交参数</span>
                <div class="row-line"></div>
                <textarea name="params" id="params" style="width: 100%" rows="3" readonly=""
                          style="font-family:Tahoma,Helvetica,Arial,'宋体',sans-serif;font-size:12px;line-height:20px;"></textarea>
                <br>
                <span class="row-title">返回结果</span>
                <div class="row-line"></div>
                <div name="resultShow" id="resultShow" style="width: 100%;height:500px" ></div>

            </div>

        </div>
    </div>
</div>
<div class="sitebar"><ul id="tree" class="nav-list" >

    </ul></div>

<div style="text-align:center;color:#ccc;margin-top:10px;clear:both">版本所有 &copy;cpsdna.com huzl 201509</div>
</body>


<script type="text/javascript">
    $(function () {
      var container = document.getElementById('resultShow');

      var options = {
        mode: 'code',
        modes: ['code', 'tree'], // allowed modes
        error: function (err) {
          alert(err.toString());
        }
      };

      var json = {
        
      };

      jsonEditor = new JSONEditor(container, options, json);

      $("#systemForm :input[name=token]").val(localStorage.token);
    })

</script>
</body>
</html>